import React from 'react';
import {Card, Button, Modal} from 'antd';
import './ui.less';

export default class Modals extends React.Component {
    state = {
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false,
    };


    handleOpen = (type) => {
        this.setState({
            [type]: true
        })

    };
    handleConfirm = (type) => {
        Modal[type]({
            title: '确认？',
            content: '你确定你都学会了React了吗',
            onOk() {
                console.log('ok')
            },
            onCancel() {
                console.log('cancal')

            }
        })


    };

    render() {
        return (
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>imooc</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>设置模态框位置</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平垂直模态框</Button>
                </Card>
                <Card title="信息确认框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>warning</Button>
                </Card>
                <Modal
                    title="react"
                    visible={this.state.showModal1}
                    onCancel={() => {
                        this.setState({
                            showModal1: false
                        })
                    }}
                >
                    基本模态框
                </Modal>
                <Modal
                    title="react"
                    okText="好的"
                    cancelText="算了"
                    visible={this.state.showModal2}
                    onCancel={() => {
                        this.setState({
                            showModal2: false
                        })
                    }}
                >
                    自定义页脚
                </Modal>
                <Modal
                    title="react"
                    style={{top: 20}}
                    visible={this.state.showModal3}
                    onCancel={() => {
                        this.setState({
                            showModal3: false
                        })
                    }}
                >
                    设置模态框位置
                </Modal>
                <Modal
                    title="react"
                    style={{top: 20}}
                    wrapClassName="vertical-center-modal"
                    visible={this.state.showModal4}
                    onCancel={() => {
                        this.setState({
                            showModal4: false
                        })
                    }}
                >
                    水平垂直模态框

                </Modal>


            </div>

        );
    }

}
